<template>
  <div class="exam-answer-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <el-loading
        v-loading="loading"
        element-loading-text="正在加载答案解析..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      />
    </div>

    <!-- 主要内容 -->
    <div v-else class="answer-content">
      <!-- 顶部结果汇总 -->
      <div class="result-summary">
        <div class="summary-header">
          <div class="exam-title">
            <h1>{{ examInfo.examTitle }}</h1>
            <span class="exam-type-badge">{{ examInfo.examType === 'random' ? '随机测试' : '试卷测试' }}</span>
          </div>
          
          <div class="action-buttons">
            <el-button @click="retakeExam" type="primary" icon="el-icon-refresh">
              重新测试
            </el-button>
            <el-button @click="backToHome" icon="el-icon-back">
              返回首页
            </el-button>
          </div>
        </div>

        <!-- 成绩卡片 -->
        <div class="score-cards">
          <div class="score-card main-score">
            <div class="score-header">
              <i class="el-icon-trophy"></i>
              <span>总成绩</span>
            </div>
            <div class="score-value">
              <span class="score-number">{{ testResult.totalScore }}</span>
              <span class="score-total">/{{ testResult.maxScore }}</span>
            </div>
            <div class="grade-badge" :class="getGradeLevel(testResult.accuracy).class">
              {{ getGradeLevel(testResult.accuracy).text }}
            </div>
          </div>

          <div class="score-card">
            <div class="score-header">
              <i class="el-icon-check"></i>
              <span>正确率</span>
            </div>
            <div class="score-value">
              <span class="score-number">{{ testResult.accuracy }}</span>
              <span class="score-unit">%</span>
            </div>
            <div class="score-detail">
              {{ testResult.correctCount }}/{{ testResult.totalQuestions }} 题
            </div>
          </div>

          <div class="score-card">
            <div class="score-header">
              <i class="el-icon-time"></i>
              <span>用时</span>
            </div>
            <div class="score-value">
              <span class="time-text">{{ formatDuration(examInfo.duration) }}</span>
            </div>
          </div>

          <div class="score-card">
            <div class="score-header">
              <i class="el-icon-date"></i>
              <span>完成时间</span>
            </div>
            <div class="score-value">
              <span class="time-text">{{ new Date(examInfo.endTime).toLocaleString() }}</span>
            </div>
          </div>
        </div>

        <!-- 详细统计 -->
        <div class="detailed-stats">
          <div class="stats-row">
            <div class="stat-item correct">
              <i class="el-icon-success"></i>
              <span class="stat-label">答对</span>
              <span class="stat-value">{{ testResult.correctCount }}</span>
            </div>
            <div class="stat-item wrong">
              <i class="el-icon-error"></i>
              <span class="stat-label">答错</span>
              <span class="stat-value">{{ testResult.wrongCount }}</span>
            </div>
            <div class="stat-item total">
              <i class="el-icon-document"></i>
              <span class="stat-label">总题数</span>
              <span class="stat-value">{{ testResult.totalQuestions }}</span>
            </div>
          </div>
        </div>

        <!-- 学习建议 -->
        <div class="study-suggestions">
          <h3>
            <i class="el-icon-lightbulb"></i>
            学习建议
          </h3>
          <ul class="suggestions-list">
            <li v-for="(suggestion, index) in getStudySuggestions()" :key="index">
              {{ suggestion }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 题目解析区域 -->
      <div class="questions-analysis">
        <div class="analysis-header">
          <div class="header-left">
            <h2>题目解析</h2>
            <span class="question-count">
              共 {{ filteredQuestions.length }} 题
              <span v-if="showOnlyWrong">（仅显示错题）</span>
            </span>
          </div>
          
          <div class="header-controls">
            <el-switch
              v-model="showOnlyWrong"
              @change="toggleShowMode"
              active-text="仅显示错题"
              inactive-text="显示全部"
              active-color="#f56c6c"
            />
          </div>
        </div>

        <!-- 题目导航 -->
        <div class="question-navigation">
          <div class="nav-buttons">
            <el-button
              @click="previousQuestion"
              :disabled="currentQuestionIndex === 0"
              icon="el-icon-arrow-left"
            >
              上一题
            </el-button>
            
            <span class="nav-info">
              {{ currentQuestionIndex + 1 }} / {{ filteredQuestions.length }}
            </span>
            
            <el-button
              @click="nextQuestion"
              :disabled="currentQuestionIndex === filteredQuestions.length - 1"
              icon="el-icon-arrow-right"
            >
              下一题
            </el-button>
          </div>

          <!-- 题目序号导航 -->
          <div class="question-numbers">
            <div
              v-for="(question, index) in filteredQuestions"
              :key="index"
              :class="['question-number-item', {
                'current': index === currentQuestionIndex,
                'correct': question.isCorrect,
                'wrong': !question.isCorrect
              }]"
              @click="jumpToQuestion(index)"
            >
              {{ index + 1 }}
            </div>
          </div>
        </div>

        <!-- 当前题目显示 -->
        <div v-if="currentQuestion" class="current-question">
          <!-- 题目信息 -->
          <div class="question-info">
            <div class="question-header">
              <div class="question-number">
                第 {{ currentQuestionIndex + 1 }} 题
              </div>
              <div class="question-meta">
                <span class="question-type">{{ getQuestionTypeDisplay(currentQuestion.questionType) }}</span>
                <span class="difficulty-tag" :class="getDifficultyClass(currentQuestion.difficulty)">
                  {{ getDifficultyText(currentQuestion.difficulty) }}
                </span>
                <div class="result-indicator" :class="{ 'correct': currentQuestion.isCorrect, 'wrong': !currentQuestion.isCorrect }">
                  <i :class="currentQuestion.isCorrect ? 'el-icon-success' : 'el-icon-error'"></i>
                  {{ currentQuestion.isCorrect ? '答对了' : '答错了' }}
                </div>
              </div>
            </div>

            <!-- 题目内容 -->
            <div class="question-content">
              <div class="question-text" v-html="currentQuestion.questionContent"></div>
            </div>

            <!-- 选项显示 -->
            <div class="options-section">
              <div
                v-for="(option, optionKey) in currentQuestion.options"
                :key="optionKey"
                :class="['option-item', {
                  'user-selected': currentQuestion.userAnswer === optionKey,
                  'correct-answer': currentQuestion.correctAnswer === optionKey,
                  'wrong-selection': currentQuestion.userAnswer === optionKey && !currentQuestion.isCorrect
                }]"
              >
                <div class="option-label">
                  {{ optionKey }}
                  <div class="option-indicators">
                    <i v-if="currentQuestion.correctAnswer === optionKey" class="el-icon-check correct-icon"></i>
                    <i v-if="currentQuestion.userAnswer === optionKey && !currentQuestion.isCorrect" class="el-icon-close wrong-icon"></i>
                  </div>
                </div>
                <div class="option-content">{{ option }}</div>
              </div>
            </div>

            <!-- 答案分析 -->
            <div class="answer-analysis">
              <div class="analysis-section">
                <h4>
                  <i class="el-icon-info"></i>
                  答案分析
                </h4>
                <div class="analysis-content">
                  <div class="answer-info">
                    <span class="label">正确答案：</span>
                    <span class="correct-answer-text">{{ currentQuestion.correctAnswer }}</span>
                  </div>
                  <div class="answer-info">
                    <span class="label">您的答案：</span>
                    <span :class="['user-answer-text', currentQuestion.isCorrect ? 'correct' : 'wrong']">
                      {{ currentQuestion.userAnswer || '未作答' }}
                    </span>
                  </div>
                </div>
              </div>

              <!-- 解析说明 -->
              <div v-if="currentQuestion.explanation" class="explanation-section">
                <h4>
                  <i class="el-icon-document"></i>
                  解析说明
                </h4>
                <div class="explanation-content">
                  {{ currentQuestion.explanation }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-questions">
          <el-empty description="暂无题目数据">
            <el-button type="primary" @click="backToHome">返回首页</el-button>
          </el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'ExamPageAnswer',
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 响应式数据
    const loading = ref(true)
    const currentQuestionIndex = ref(0)
    const showOnlyWrong = ref(false)
    const resultData = ref(null)

    // 初始化数据
    const initData = () => {
      try {
        if (route.query.resultData) {
          resultData.value = JSON.parse(route.query.resultData)
          console.log('接收到的测试结果:', resultData.value)
        } else {
          ElMessage.error('未找到测试结果数据')
          router.push('/home/exam')
          return
        }
      } catch (error) {
        console.error('解析结果数据失败:', error)
        ElMessage.error('数据格式错误')
        router.push('/home/exam')
      } finally {
        loading.value = false
      }
    }

    // 计算属性
    const examInfo = computed(() => resultData.value?.examInfo || {})
    const testResult = computed(() => resultData.value?.result || {})
    const userInfo = computed(() => resultData.value?.userInfo || {})

    // 过滤后的题目列表
    const filteredQuestions = computed(() => {
      if (!testResult.value.questionResults) return []
      
      if (showOnlyWrong.value) {
        return testResult.value.questionResults.filter(q => !q.isCorrect)
      }
      return testResult.value.questionResults
    })

    // 当前显示的题目
    const currentQuestion = computed(() => {
      if (filteredQuestions.value.length === 0) return null
      return filteredQuestions.value[currentQuestionIndex.value] || null
    })

    // 获取成绩等级
    const getGradeLevel = (score) => {
      if (score >= 90) return { text: '优秀', color: '#67C23A', class: 'grade-excellent' }
      if (score >= 80) return { text: '良好', color: '#E6A23C', class: 'grade-good' }
      if (score >= 70) return { text: '中等', color: '#F56C6C', class: 'grade-medium' }
      if (score >= 60) return { text: '及格', color: '#909399', class: 'grade-pass' }
      return { text: '不及格', color: '#F56C6C', class: 'grade-fail' }
    }

    // 格式化时间
    const formatDuration = (seconds) => {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60

      if (hours > 0) {
        return `${hours}时${minutes}分${secs}秒`
      } else if (minutes > 0) {
        return `${minutes}分${secs}秒`
      } else {
        return `${secs}秒`
      }
    }

    // 获取题目类型显示文本
    const getQuestionTypeDisplay = (questionType) => {
      const typeMap = {
        'CS01': '单选题',
        'CS02': '多选题',
        'CS03': '填空题',
        'CS04': '简答题'
      }
      return typeMap[questionType] || '选择题'
    }

    // 获取难度显示
    const getDifficultyText = (difficulty) => {
      const difficultyMap = {
        1: '基础',
        2: '简单',
        3: '中等',
        4: '困难',
        5: '极难'
      }
      return difficultyMap[difficulty] || '中等'
    }

    const getDifficultyClass = (difficulty) => {
      const classMap = {
        1: 'difficulty-easy',
        2: 'difficulty-simple',
        3: 'difficulty-medium',
        4: 'difficulty-hard',
        5: 'difficulty-extreme'
      }
      return classMap[difficulty] || 'difficulty-medium'
    }

    // 题目导航
    const jumpToQuestion = (index) => {
      if (index >= 0 && index < filteredQuestions.value.length) {
        currentQuestionIndex.value = index
      }
    }

    const previousQuestion = () => {
      if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--
      }
    }

    const nextQuestion = () => {
      if (currentQuestionIndex.value < filteredQuestions.value.length - 1) {
        currentQuestionIndex.value++
      }
    }

    // 切换显示模式（只显示错题/显示全部）
    const toggleShowMode = () => {
      currentQuestionIndex.value = 0;
    }

    // 返回首页
    const backToHome = () => {
      router.push('/home/exam')
    }

    // 重新测试 
    const retakeExam = () => {
      const examInfo = resultData.value?.examInfo
      if (!examInfo) return

      if (examInfo.examType === 'random') {
        router.push({
          name: 'ExamPageTesting',
          query: {
            type: 'random',
            courseId: examInfo.courseId,
            questionCount: testResult.value.totalQuestions,
            duration: Math.floor(examInfo.duration / 60), // 转换回分钟
            knowledgePoints: JSON.stringify([])
          }
        })
      } else if (examInfo.examType === 'paper') {
        router.push({
          name: 'ExamPageTesting',
          query: {
            type: 'paper',
            paperId: examInfo.paperId,
            paperName: examInfo.paperName
          }
        })
      }
    }

    // 生成学习建议
    const getStudySuggestions = () => {
      const wrongQuestions = testResult.value.questionResults?.filter(q => !q.isCorrect) || []
      
      if (wrongQuestions.length === 0) {
        return ['恭喜！你已经完全掌握了相关知识点，继续保持！']
      }

      const suggestions = []
      const accuracy = testResult.value.accuracy || 0

      if (accuracy < 60) {
        suggestions.push('建议系统性地复习相关知识点，加强基础训练')
      } else if (accuracy < 80) {
        suggestions.push('基础掌握较好，建议针对错题知识点进行专项练习')
      } else {
        suggestions.push('掌握程度很好，建议关注细节和易错点')
      }

      // 根据错题难度分析
      const hardWrongQuestions = wrongQuestions.filter(q => q.difficulty >= 4)
      const easyWrongQuestions = wrongQuestions.filter(q => q.difficulty <= 2)

      if (hardWrongQuestions.length > 0) {
        suggestions.push('高难度题目失分较多，建议深入学习相关高级概念')
      }
      
      if (easyWrongQuestions.length > 0) {
        suggestions.push('基础题目有失分，建议巩固基本概念和定义')
      }

      return suggestions
    }

    // 生命周期
    onMounted(() => {
      initData()
    })

    return {
      // 数据
      loading,
      currentQuestionIndex,
      showOnlyWrong,
      resultData,
      // 计算属性
      examInfo,
      testResult,
      userInfo,
      filteredQuestions,
      currentQuestion,
      // 方法
      getGradeLevel,
      formatDuration,
      getQuestionTypeDisplay,
      getDifficultyText,
      getDifficultyClass,
      jumpToQuestion,
      previousQuestion,
      nextQuestion,
      toggleShowMode,
      backToHome,
      retakeExam,
      getStudySuggestions
    }
  }
}
</script>

<style scoped>
.exam-answer-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}

.answer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 结果汇总样式 */
.result-summary {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e4e7ed;
}

.exam-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.exam-title h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.exam-type-badge {
  background: #409eff;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

/* 成绩卡片 */
.score-cards {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.score-card {
  background: #f8fafe;
  border: 1px solid #e1e8ff;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.score-card.main-score {
  background: linear-gradient(135deg, #409eff, #67c23a);
  color: white;
  border: none;
}

.score-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 14px;
  color: #606266;
}

.main-score .score-header {
  color: rgba(255, 255, 255, 0.9);
}

.score-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.score-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #303133;
}

.main-score .score-number {
  color: white;
}

.score-total {
  font-size: 1.5rem;
  color: #909399;
}

.main-score .score-total {
  color: rgba(255, 255, 255, 0.8);
}

.score-unit {
  font-size: 1.2rem;
  color: #909399;
}

.time-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: #303133;
}

.score-detail {
  font-size: 12px;
  color: #909399;
}

.grade-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.grade-excellent { background: rgba(255, 255, 255, 0.2); color: white; }
.grade-good { background: #fff7e6; color: #e6a23c; }
.grade-medium { background: #fef0f0; color: #f56c6c; }
.grade-pass { background: #f5f5f5; color: #909399; }
.grade-fail { background: #fef0f0; color: #f56c6c; }

/* 详细统计 */
.detailed-stats {
  margin-bottom: 2rem;
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  background: #f8f9fa;
}

.stat-item.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.stat-item.wrong {
  background: #fef0f0;
  color: #f56c6c;
}

.stat-item.total {
  background: #f5f5f5;
  color: #606266;
}

.stat-label {
  font-size: 14px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
}

/* 学习建议 */
.study-suggestions {
  background: #f0f9ff;
  border-left: 4px solid #409eff;
  padding: 1.5rem;
  border-radius: 8px;
}

.study-suggestions h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  color: #409eff;
  font-size: 16px;
}

.suggestions-list {
  margin: 0;
  padding-left: 1.5rem;
}

.suggestions-list li {
  margin-bottom: 0.5rem;
  color: #606266;
  line-height: 1.5;
}

/* 题目解析区域 */
.questions-analysis {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left h2 {
  font-size: 20px;
  color: #303133;
  margin: 0;
}

.question-count {
  font-size: 14px;
  color: #909399;
}

/* 题目导航 */
.question-navigation {
  margin-bottom: 2rem;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.nav-info {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  min-width: 80px;
  text-align: center;
}

.question-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.question-number-item {
  width: 40px;
  height: 40px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.question-number-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.question-number-item.current {
  border-color: #409eff;
  background: #409eff;
  color: white;
}

.question-number-item.correct {
  background: #f0f9ff;
  border-color: #67c23a;
  color: #67c23a;
}

.question-number-item.wrong {
  background: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 当前题目显示 */
.current-question {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 2rem;
  background: #fafafa;
}

.question-info {
  margin-bottom: 2rem;
}

.question-header {
  margin-bottom: 1.5rem;
}

.question-number {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 1rem;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.question-type {
  background: #409eff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.difficulty-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.difficulty-easy { background: #f0f9ff; color: #409eff; }
.difficulty-simple { background: #f0f9ff; color: #67c23a; }
.difficulty-medium { background: #fff7e6; color: #e6a23c; }
.difficulty-hard { background: #fef0f0; color: #f56c6c; }
.difficulty-extreme { background: #f5f5f5; color: #909399; }

.result-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.result-indicator.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.result-indicator.wrong {
  background: #fef0f0;
  color: #f56c6c;
}

.question-content {
  margin-bottom: 2rem;
}

.question-text {
  font-size: 16px;
  line-height: 1.6;
  color: #303133;
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

/* 选项显示 */
.options-section {
  margin-bottom: 2rem;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: white;
  transition: all 0.3s ease;
}

.option-item.correct-answer {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-item.user-selected {
  border-color: #409eff;
  background: #f0f9ff;
}

.option-item.wrong-selection {
  border-color: #f56c6c;
  background: #fef0f0;
}

.option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 50px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f5f7fa;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.correct-answer .option-label {
  background: #67c23a;
  color: white;
}

.user-selected .option-label {
  background: #409eff;
  color: white;
}

.wrong-selection .option-label {
  background: #f56c6c;
  color: white;
}

.option-indicators {
  display: flex;
  align-items: center;
  gap: 4px;
}

.correct-icon {
  color: #67c23a;
  font-size: 16px;
}

.wrong-icon {
  color: #f56c6c;
  font-size: 16px;
}

.option-content {
  flex: 1;
  line-height: 1.5;
  color: #303133;
  font-size: 14px;
  padding: 8px 0;
}

/* 答案分析 */
.answer-analysis {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid #e4e7ed;
}

.analysis-section {
  margin-bottom: 1.5rem;
}

.analysis-section h4,
.explanation-section h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.answer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.answer-info .label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.correct-answer-text {
  padding: 4px 12px;
  background: #f0f9ff;
  color: #67c23a;
  border-radius: 4px;
  font-weight: 600;
}

.user-answer-text {
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 600;
}

.user-answer-text.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.user-answer-text.wrong {
  background: #fef0f0;
  color: #f56c6c;
}

.explanation-section {
  border-top: 1px solid #e4e7ed;
  padding-top: 1.5rem;
}

.explanation-content {
  line-height: 1.6;
  color: #606266;
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

/* 空状态 */
.empty-questions {
  text-align: center;
  padding: 3rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .answer-content {
    padding: 1rem 0.5rem;
  }

  .summary-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .score-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stats-row {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .nav-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .question-numbers {
    max-height: 200px;
    overflow-y: auto;
  }

  .current-question {
    padding: 1rem;
  }

  .question-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .option-item {
    flex-direction: column;
    gap: 0.5rem;
  }

  .analysis-content {
    gap: 1rem;
  }

  .answer-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .exam-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .exam-title h1 {
    font-size: 20px;
  }

  .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .question-number {
    font-size: 18px;
  }

  .question-text {
    font-size: 14px;
    padding: 1rem;
  }

  .score-number {
    font-size: 2rem;
  }
}
</style>